import { IndexBar, List, NavBar, SearchBar } from 'antd-mobile'
import React, { useEffect, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import './type.css'
import { LocationFill } from 'antd-mobile-icons'
import axios from '../../axios/api'
import { useDispatch } from 'react-redux'
import { setCitySelect } from '../../store/counterSlice'

function Type() {

  const [data, setData] = useState([])
  const [datalist, setDataList] = useState([])

  const [search, setSearch] = useState([])

  const searchData = async (val) => {
    if (val == '') {
      setSearch([])
      return
    }
    else {
      const res = await axios.get('/api/city/search', {
        params: {
          wd: val
        }
      })
      console.log(res, "搜索");
      setSearch(res.data.data)
    }


  }



  const getData = async () => {
    const res = await axios.get('/api/city')
    console.log(res);
    setData(res.data.data.hotCities)

    setDataList(res.data.data.city)
  }
  useEffect(() => {
    getData()
  }, [])

  const nav = useNavigate()

  const back = () => {
    nav(-1)
  }


  const { type } = useParams()

  const dispatch = useDispatch();

  const selectFN = (val) => {
    console.log(val);

    dispatch(setCitySelect({ type, val }));
    console.log(type, val);

    nav(-1);
  };

  return (
    <div style={{ backgroundColor: '#ccc', height: '100vh' }}>
      <NavBar onBack={back} className='navBar'>
        <SearchBar placeholder='请输入内容' onChange={searchData} />
      </NavBar>

      <div>
        <List >
          {
            search.map((item) => {
              return <List.Item>{item.name}</List.Item>
            })
          }

        </List>

      </div>

      <div className='location'>
        <span>当前定位：</span>
        <span><LocationFill /></span>
        <span>北京市</span>
      </div>
      <div className='typeList'>
        <p>热门</p>
        {
          data.map((item) => {
            return <span onClick={() => {
              selectFN(item.name);
            }} >{item.name}</span>
          })
        }

      </div>
      <div style={{ height: window.innerHeight }}>
        <IndexBar>
          {datalist.map(group => {
            const { initial, list } = group
            return (
              <IndexBar.Panel
                index={initial}
                title={`标题${initial}`}
                key={`标题${initial}`}
              >
                <List>
                  {list.map((item, index) => (
                    <List.Item key={index} onClick={() => {
                      selectFN(item.name);
                    }}>{item.name}</List.Item>
                  ))}
                </List>
              </IndexBar.Panel>
            )
          })}
        </IndexBar>
      </div>

    </div>
  )
}

export default Type